<template>
    <div class="main">
        <div class="head-wrap flex-jsb">
            <div class="flex">
                <el-form :model="form" :inline="true" ref="form" label-width="100px" class="form">
                    <el-form-item label="IP网段名称：" prop="ipNetworkName">
                        <el-input size="mini" clearable v-model="form.ipNetworkName" placeholder="请输入IP网段名称"></el-input>
                    </el-form-item>
                    <el-form-item label="IP网段：" prop="ipNetwork">
                        <el-input size="mini" clearable v-model="form.ipNetwork" placeholder="请输入IP网段"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-button size="mini" @click="handleRset">重置</el-button>
                <el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
                <!-- <el-button size="mini" type="primary" @click="handleSelect">收起</el-button> -->
            </div>

        </div>
        <div class="bottom-wrap mt15">
            <custom-head text="IP地址规划列表" class="mt15">
                <el-button size="mini" v-hasPerm="['createIPPlan']" type="primary"
                    @click="handleCreate">创建IP地址规划</el-button>
            </custom-head>
            <div class="table-wrap mt15">
                <el-table :data="showData" height="570" style="width: 100%" :cell-style="{ color: '#333' }" class="table">
                    <el-table-column prop="ipNetworkName" label="IP网段名称" show-overflow-tooltip />
                    <el-table-column prop="ipNetwork" label="IP网段" show-overflow-tooltip />
                    <!-- <el-table-column prop="assetModel" label="网络类别" /> -->
                    <!-- <el-table-column prop="assetBusinessCode" label="所属业务" /> -->
                    <el-table-column prop="assetSerialNumName" label="安全分区" />
                    <el-table-column prop="createUser" label="创建人" />
                    <el-table-column prop="createTime" label="创建时间">
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.createTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="deleteIpPlan(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex-ac flex-jsb">
                    <div></div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total"
                        class="ml25 mt15 systemPagination el-pagination">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog :title="titleText" :show-close="false" :titles="[]" @close="dialogClose" :visible.sync="dialogVisible"
            width="640px">
            <el-form :model="currentRow" ref="planForm" :rules="rules" label-width="150px" class="form">
                <el-form-item label="IP网段名称：" prop="ipNetworkName">
                    <el-input size="mini" clearable v-model="currentRow.ipNetworkName" placeholder="请输入IP网段名称"></el-input>
                </el-form-item>
                <el-form-item label="IP网段：" prop="ipNetwork">
                    <el-input size="mini" clearable v-model="currentRow.ipNetwork" placeholder="请输入IP网段"></el-input>
                </el-form-item>
                <!-- <el-form-item label="网络类别：" prop="assetModel">
                    <el-radio-group v-model="currentRow.assetModel">
                        <el-radio label="A">A网</el-radio>
                        <el-radio label="B">B网</el-radio>
                    </el-radio-group>
                </el-form-item> -->

                <!-- <el-form-item label="所属业务：" prop="assetBusinessCode">
                    <el-select size="mini" v-model="currentRow.assetBusinessCode" placeholder="请选择所属业务">
                        <el-option :label="item" :key="item" :value="item" v-for="item in projectList" />
                    </el-select>
                </el-form-item> -->

                <el-form-item label="安全区域：" prop="assetSerialNum">
                    <el-select size="mini" v-model="currentRow.assetSerialNum" placeholder="请选择安全区域">
                        <el-option :key="item.oid" :label="item.name" :value="item.oid" v-for="item in safeZoneTypeOpt" />
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import {
    getIpManagetList,
    createIpPlan,
    deleteIpPlan,
    updateIpPlan
} from "@/api/ipManageApi.js";
import utils from "@/utils/date.js"
import customHead from "@/components/head/index.vue"
import { getAction } from '@/utils/httpUtil'
import assetPutawayApi from '@/api/assetPutawayApi'
import assetApi from '@/api/assetApi'
import { validateIP } from "@/utils/validate"
export default {
    components: { customHead },
    data() {

        return {
            selecData: [
                { value: 1, label: "待分配" },
                { value: 2, label: "已分配" },
            ],
            form: {
                ipNetworkName: "",//
                ipNetwork: "",//
            },
            ipList: [],
            showData: [],
            total: 0,
            pageSize: 10,
            currentPage: 1,
            dialogVisible: false,
            edit: false,
            currentRow: {
                assetSerialNum: "",
                ipNetworkName: "",
                ipNetwork: "",
                // assetBusinessCode: "",
                // assetModel: "A"
            },
            safeZoneTypeOpt: [],
            projectList: [],
            rules: {
                ipNetworkName: [
                    { required: true, message: '请输入IP网段名称', trigger: 'change' }
                ],
                ipNetwork: [
                    { validator: validateIP },
                    { required: true, message: '请输入IP网段', trigger: 'change' }
                ],
                assetSerialNum: [
                    { required: true, message: '请选择安全区域', trigger: 'change' },
                ],
                // assetBusinessCode: [
                //     { required: true, message: '请选择所属业务', trigger: 'change' }
                // ],
                // assetModel: [
                //     { required: true, message: '请选择网络类别', trigger: 'change' }
                // ]
            }
        };
    },
    mounted() {
        this.getIpList();
        // 安全区域
        getAction(assetApi.asset.queryByCode, { name: '安全区域' }).then(res => {
            console.log(res);
            this.safeZoneTypeOpt = res.info
        })

        this.loadProject();
    },
    computed: {
        titleText() {
            return this.edit ? '编辑IP规划' : '创建IP规划'
        }
    },
    methods: {

        handleSelect() {
            this.getIpList();
        },
        // 编辑
        handleClick(row) {
            this.dialogVisible = true;
            this.edit = true;
            this.currentRow = row;
            console.log(this.currentRow);
        },
        loadProject() {
            getAction(assetPutawayApi.selectSystem).then(res => {
                this.projectList = res.info
            })
        },

        // 
        ok() {
            this.$refs.planForm.validate().then(res => {
                if (this.edit) {
                    this.updateIpPlan()
                } else {
                    this.createIpPlan()
                }
            })
        },

        //
        getIpList() {
            getIpManagetList(this.form).then(res => {
                if (res.code == "200") {
                    this.ipList = res.info;
                    this.total = res.info.length;
                    this.showData = this.ipList.slice(0, this.pageSize);
                }
            })
        },
        dialogClose() {
            // if (this.$refs.planForm) {
            //     this.$refs.planForm.resetFields();
            // }
        },
        // 
        deleteIpPlan(row) {
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteIpPlan(row).then(res => {
                    if (res.code == "200") {
                        this.message("删除成功", 1)
                    }
                })
            })
        },
        // 更新规划
        updateIpPlan() {
            updateIpPlan(this.currentRow).then(res => {
                if (res.code == "200") {
                    this.message("保存成功", 1)
                    this.dialogVisible = false;
                }
            })
        },
        // 创建ip规划
        handleCreate() {
            this.edit = false;
            this.currentRow = {}
            this.dialogVisible = true;

        },
        // 创建规划
        createIpPlan() {
            createIpPlan(this.currentRow).then(res => {
                this.message("创建成功", 1)
                this.dialogVisible = false;
                this.getIpList()
            })
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.showData = this.ipList.slice(0, val)
        },

        handleCurrentChange(val) {
            this.showData = this.ipList.slice((val - 1) * this.pageSize, this.pageSize * val)
        },

        formatDate(date) {
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
        },
        handleRset() {
            this.$refs.form.resetFields();
            this.getIpList()
        },

    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .head-wrap {
        padding: 20px 17px;
        border-radius: 6px;

        /deep/ .el-form-item {
            margin-bottom: 0;

            .el-form-item__label {
                color: #000;
            }
        }
    }

    .head-wrap,
    .bottom-wrap {
        background: #FFFFFF;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    }

    .bottom-wrap {
        padding: 0 15px;
        border-radius: 10px;
        height: 89%;
        overflow: hidden;

        .table-wrap {
            height: 100%;
            overflow: auto;
            color: #333;

            .table {
                border: 1px solid #F0F0F0;
                border-radius: 0px 0px 6px 6px;
                overflow: hidden;
            }


            /deep/ .el-table__header tr,
            /deep/ .el-table__header th {
                background-color: var(--system-table-header-bgc) !important;
                color: #333;
                font-weight: 400;
            }

            .state {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .state1 {
                background: #FF9000;
            }

            .state2 {
                background: #21B795;
            }
        }
    }
}
</style>
  
  